import {Component, ComponentProps, VueComponent, Link, Hook, Mut, Computed} from "vue3-oop";
import {NButtonGroup, NButton, NDropdown, NSpace} from "naive-ui";
import { nicon } from "@/utils/IconUtil";
import styles from "./index.module.scss";
import LogicFlow from '@logicflow/core';

interface IProps {
  logicFlow: LogicFlow
}
@Component()
export default class ConfigPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    logicFlow:{}
  }

  constructor() {
    super()
  }

  @Mut() private state = {
    zoom: 100,
    selectable: false
  }

  private options = {
    Event: {
      key: 'Event',
      label: '事件',
      children: [
        {
          key: 'StartEvent',
          label: '开始事件'
        },{
          key: 'EndEvent',
          label: '结束事件'
        }
      ]
    },
    Task: {
      key: 'Task',
      label: '任务',
      children: [
        {
          key: 'UserTask',
          label: '用户任务'
        },{
          key: 'ServiceTask',
          label: '服务任务'
        }
      ]
    },
    Gateway: {
      key: 'Gateway',
      label: '网关',
      children: [
        {
          key: 'ExclusiveGateway',
          label: '互斥网关'
        }
        // ,{
        //   key: 'ParallelGateway',
        //   label: '并行网关'
        // },{
        //   key: 'InclusiveGateway',
        //   label: '相容网关'
        // },{
        //   key: 'ComplexGateway',
        //   label: '复杂网关'
        // }
      ]
    }
  }

  private handleDragItem = (key: string | number)=>{
    // window.$message.info(String(key))

    if(key==='StartEvent'){
      this.props.logicFlow.dnd.startDrag({type: 'startEvent',text: '开始'});
    }else if(key==='EndEvent'){
      this.props.logicFlow.dnd.startDrag({type: 'endEvent',text: '结束'});
    }else if(key==='UserTask'){
      this.props.logicFlow.dnd.startDrag({type: 'userTask',text: '用户任务'});
    }else if(key==='ServiceTask'){
      this.props.logicFlow.dnd.startDrag({type: 'serviceTask',text: '服务任务'});
    }else if(key==='ExclusiveGateway'){
      this.props.logicFlow.dnd.startDrag({type: 'exclusiveGateway',text: '互斥网关'});
    }
    // else if(key==='ParallelGateway'){
    //   this.props.logicFlow.dnd.startDrag({type: 'exclusiveGateway',text: '并行网关'});
    // }else if(key==='InclusiveGateway'){
    //   this.props.logicFlow.dnd.startDrag({type: 'exclusiveGateway',text: '相容网关'});
    // }else if(key==='ComplexGateway'){
    //   this.props.logicFlow.dnd.startDrag({type: 'exclusiveGateway',text: '复杂网关'});
    // }

  }

  private toggleSelectable=()=>{
    this.state.selectable = !this.state.selectable;
    this.props.logicFlow.updateEditConfig({
      stopMoveGraph: this.state.selectable,
    });
  }

  private handleNodeProps =(option: any)=>{
    option.props = option.props || {};
    option.props.style = option.props.style || {};
    option.props.style.userSelect = 'none';
    option.props.style.cursor = 'grab';
    option.props.onMousedown = (e:any)=>{this.handleDragItem(option.key)}
    return option
  }

  private toggleMiniMap=()=>{
    const { miniMap } = this.props.logicFlow.extension;
    if(miniMap.__isShow){
      miniMap.hide();
    }else{
      miniMap.show(5, 5);
    }
  }

  /** 放大/缩小/重置 */
  private handleZoom=(value:number)=>{
    if(value===0){
      console.log(this.props.logicFlow)
      this.state.zoom = 100;
      this.props.logicFlow.resetZoom();
    }else{
      const newZoom = this.state.zoom + value;
      if(newZoom>=30&&newZoom<=200){
        this.state.zoom = newZoom;
      }
      this.props.logicFlow.zoom(this.state.zoom/100);
    }
  }

  private handleUndo=()=>{
    this.props.logicFlow.undo();
  }

  private handleRedo=()=>{
    this.props.logicFlow.redo();
  }

  private handleClear=()=>{
    this.props.logicFlow.clearData()
  }

  render(){
    const selectProps = !this.state.selectable?{}:{ghost:true,type:"info",style:{fontWeight:'bolder'}}  as any
    return(
      <NSpace class={[styles.bpmn_shape_panel]}>
        <NButtonGroup size="small">
          <NDropdown 
            size="small" 
            options={this.options.Event.children}
            nodeProps={this.handleNodeProps} 
          >
            <NButton>{{icon:nicon("RadioButtonUncheckedRound"),default:()=>this.options.Event.label}}</NButton>
          </NDropdown>
          <NDropdown 
            size="small" 
            options={this.options.Task.children}
            nodeProps={this.handleNodeProps} 
          >
            <NButton>{{icon:nicon("CropSquareOutlined"),default:()=>this.options.Task.label}}</NButton>
          </NDropdown>
          <NDropdown 
            size="small" 
            options={this.options.Gateway.children}
            nodeProps={this.handleNodeProps} 
          >
            <NButton>{{icon:nicon("Diamond24Regular"),default:()=>this.options.Gateway.label}}</NButton>
          </NDropdown>
          <NButton {...selectProps} onClick={this.toggleSelectable}>{{icon:nicon("Select02"),default:()=>"选取"}}</NButton>
        </NButtonGroup>
        {/* <NButtonGroup size="small">
          <NButton onClick={()=>{}}>{{icon:nicon("AlignHorizontalLeftRound")}}</NButton>
          <NButton onClick={()=>{}}>{{icon:nicon("AlignHorizontalRightRound")}}</NButton>
          <NButton onClick={()=>{}}>{{icon:nicon("AlignVerticalTopRound")}}</NButton>
          <NButton onClick={()=>{}}>{{icon:nicon("AlignVerticalBottomRound")}}</NButton>
          <NButton onClick={()=>{}}>{{icon:nicon("AlignHorizontalCenterRound")}}</NButton>
          <NButton onClick={()=>{}}>{{icon:nicon("AlignVerticalCenterRound")}}</NButton>
        </NButtonGroup> */}
        <NButtonGroup size={"small"}>
          <NButton onClick={this.handleUndo}>{{icon:nicon("ArrowUndoSharp")}}</NButton>
          <NButton onClick={this.handleRedo}>{{icon:nicon("ArrowRedoSharp")}}</NButton>
          <NButton onClick={this.handleClear}>{{icon:nicon("MdRefreshCircle")}}</NButton>
        </NButtonGroup>
        <NButtonGroup size={"small"}>
          <NButton onClick={this.toggleMiniMap}>{{icon:nicon("MapFilled")}}</NButton>
          <NButton onClick={()=>{this.handleZoom(-5)}}>{{icon:nicon("ZoomOutOutlined")}}</NButton>
          <NButton onClick={()=>{this.handleZoom(0)}}>{`${this.state.zoom}%`}</NButton>
          <NButton onClick={()=>{this.handleZoom(5)}}>{{icon:nicon("ZoomInOutlined")}}</NButton>
        </NButtonGroup>
      </NSpace>
    )
  }
}